<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户系统-会员管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <!-- 引入组件库 -->
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
    	<!-- 页面头部 -->
		<div class="page-header">
			<h1 class="page-title">会员管理</h1>
			<div class="z-pop_question">
  	 			<el-popover
				  ref="popoverq"
				  placement="bottom-start"
				  width="400"
				  trigger="hover">
				  <p class="z-jiao">
				  	查找你所有的会员，了解会员详情信息<br/>
				  </p>
				</el-popover>
				<i v-popover:popoverq class="el-icon-question"></i>
  	 		</div>
			<div class="breadcrumb"><a href="javascript:top.location.reload();">首页</a><span>/</span>客户<span>/</span>会员管理</div>
		</div><!-- 页面头部 end -->
		
		<div class="list-content">
			<!--条件筛选-->
			<div class="content_item_filter clearfix">
 				<div class="input-select fl btn-radid_none">
 					<div class="filter-form filter-form-one clearfix">
	 					<el-input placeholder="微信昵称/手机号" clearable v-model="conditions['query'].value" class="minW40 z_input-holder" >
						</el-input>
					</div>

					<div class="filter-operate">
						<el-tooltip class="item" content="查询" placement="bottom-start">
					    	<el-button icon="el-icon-search" @click="queryCustomer"></el-button>
					    </el-tooltip>
						<el-tooltip class="item" content="清空" placement="bottom-start">
					    	<el-button icon="el-extend-clean" @click="clearCustomer"></el-button>
					    </el-tooltip>
				    </div>
 				</div>
 				<div class="filter-btn fr">
					<el-button split-button type="primary" @click="toSendCoupon">
				  	    发送优惠券
					</el-button>
 				</div>
			</div>

			<!--主体表格-->
			<div class="z-tables">
 				<el-table ref="multipleTable" :data="customerList" v-loading="loading" style="width: 100%;" @selection-change="selsChange">
 					<el-table-column type="selection" prop="uuid" width="55"></el-table-column>
 					<el-table-column label="会员头像" min-width="100">
	                    	<template slot-scope="scope">
	                    		<div class="product-table">
		                    		<span class='img'>
			                    		<div v-if="!!scope.row.image"><img :src="scope.row.image" style="width: 50px;height: 50px"></div>
			                    		<div v-else><img src="../../../../img/noimage.jpg" style="width: 80px;height: 80px"></div>
		                    		</span>
								</div>
	                        </template>
	                    </el-table-column>
				    <el-table-column prop="nickname" label="微信昵称" min-width="100"></el-table-column>
				    <el-table-column prop="mobile" label="手机号" min-width="100"></el-table-column>
				    <el-table-column label="消费次数" min-width="100">
				    	<template slot-scope="scope">
				    		{{scope.row.time?scope.row.time:0}}
				    	</template>
				    </el-table-column>
				    <el-table-column label="消费金额" min-width="100">
				    	<template slot-scope="scope">
				    		{{scope.row.money?scope.row.money:0}}
				    	</template>
				    </el-table-column>
                    <el-table-column label="积分" min-width="90">
                    	<template slot-scope="scope">
				    		{{scope.row.usable_integral?scope.row.usable_integral:0}}
				    	</template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" min-width="100"></el-table-column>
				    <el-table-column label="创建时间" min-width="160" class-name="table-operate-td">
						<template slot-scope="scope">
							<div class="table-info">{{scope.row.create_time}}</div>
							<div class="table-operate">
								<el-button type="primary" @click="sendCoupon(scope.row.uuid)">发送优惠券</el-button>
						        <el-button type="primary" @click="viewCoupon(scope.row.uuid)">查看优惠券</el-button>
                                <el-button type="primary" @click="view(scope.row)">资料详情</el-button>
							</div>
						</template>
				    </el-table-column>
				</el-table>
 			</div>
 			
 			<!--分页-->
 			<div class="grid-content">
	 			<div class="bg-purple-light">
				    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
			  	</div>
			</div>
		</div>
		
		
		<!-- 选择优惠券模态框 -->
		<el-dialog title="选择优惠券" :visible.sync="dialogVisible">
			<ul class="send_coupon_list">
	            <li>
	                <h3 class="fz30">店铺优惠券</h3>
	                <div class="send_list clearfix">
	                    <span v-for="item in selectList" v-if="item.couponType == '1'" @click="checkCoupon(item.uuid)" v-bind:class="{'active':checkList.indexOf(item.uuid)>=0}">{{item.couponName}}（满{{item.reachPrice}}减{{item.couponPrice}}元）</span>
	                </div>
	            </li>
	            <li>
	                <h3 class="fz30">单品优惠券</h3>
	                <div class="send_list clearfix">
	                    <span v-for="item in selectList" v-if="item.couponType == '2'" @click="checkCoupon(item.uuid)" v-bind:class="{'active':checkList.indexOf(item.uuid)>=0}">{{item.couponName}}（{{item.productName}}）</span>
	                </div>
	            </li>
	        </ul>
			<div slot="footer" class="dialog-footer">
				<el-button @click="saveSelect" type="primary">保 存</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</div>
		</el-dialog>
        <!-- 选择优惠券模态框 end -->
        
	</div>
</div>
</body>

<script th:inline="javascript">
	new Vue({
        el: "#app",
        data: {
            stateList: [[${stateList}]], 
            sourceList: [[${sourceList}]], 
            customerList: [],
            tableAllCheck: false,
            conditions: {
                "query": {
                    "operation": "LIKE",
                    "value": ""
                },
                "vendorId": {
                    "operation": "EQ",
                    "value": [[${vendorId}]]
                }
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            loading: true,
            dialogVisible:false,
            checkList:[], // 已选中的优惠券
            selectCustomerUuid:[], // 当前会员uuid
            selectList:[]  // 所有优惠券
        },
        created: function() {
            var self = this;
            var queryMessage = {
                "queryPage": self.currentPage,
                "pageShow": self.pageSize,
                "queryParams": self.conditions,
                "sortMap": {}
            };
            $.ajax({
                url: "/vendor/customer/customer/getCustomerByVendorId",
                type: "POST",
                data: JSON.stringify(queryMessage),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function(data) {
                    if (data && data.returnCode == "1") {
                        self.customerList = data.returnMessage;
                        self.totalNum = data.pager.totalNum;
                    }
                    self.loading = false;
                }
            });
        },
        methods: {
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryCustomer();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryCustomer();
            },
            handleCurrentTable: function (val) {
                window.location.href = 'edit.html?no=' + val.no;
            },
			tableAllCheckFn(rows){
				if (rows) {
		          rows.forEach(row => {
		            this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
		          })
		        }
			},
			selsChange(sels) {  
                this.sels = sels;
            }, 
            checkCoupon(uuid){
            	var index = this.checkList.indexOf(uuid);
            	if(index >= 0){
            		this.checkList.splice(index,1);
            	}else{
            		this.checkList.push(uuid);
            	}
            },
			handleCommand(command) {
				var self = this;
				var ids = "";
				if(self.sels){
					ids = self.sels.map(item => item.uuid).join();
				}
				if(ids == ""){
					self.$message({
                    	duration: 2000,
                        message: '请至少选择一个会员数据',
                        type: 'warning',
                        customClass: 'message-center'
                    });
					return ;
				}
				if(command == "delete"){
					self.handleDelete("",ids);
				}else if(command == "reset"){
					self.showPasswordDialog(ids);
				}else if(command == "freeze"){
					self.handleFreeze("",ids,"2");
				}else if(command == "active"){
					self.handleFreeze("",ids,"1");
				}
			},
            queryCustomer: function() {
                var self = this;
                self.loading = true;
                var queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {}
                };
                $.ajax({
                    url: "/vendor/customer/customer/getCustomerByVendorId",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.customerList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                        self.loading = false;
                    }
                });
            },
            clearCustomer: function() {
                var self = this;
                self.conditions['query'].value = "";
            },
            toAddCustomer: function () {
                window.location.href = "/vendor/customer/customer/toadd";
            },
            viewCoupon(uuid) {
                window.location.href = "/vendor/cater/coupondetail/tocustomercoupon" + "/" + uuid;
            },
            view(row) {
                window.location.href = "/vendor/customer/customer/toview" + "/" + row.uuid;
            },
            sendCoupon(uuid){
            	queryCouponList(this);
            	this.dialogVisible = true;
            	this.selectCustomerUuid[0] = uuid;
            },
            toSendCoupon(){
            	var self = this;
				var ids = [];
				if(self.sels){
					ids = self.sels.map(item => item.uuid);
				}
				if(ids.length <= 0){
					self.$message({
                    	duration: 2000,
                        message: '请至少选择一个会员数据',
                        type: 'warning',
                        customClass: 'message-center'
                    });
					return ;
				}
				queryCouponList(this);
            	this.dialogVisible = true;
            	this.selectCustomerUuid = ids;
            },
            saveSelect: function(){
            	let that = this;
            	if(!that.checkList[0]){
            		that.$message({
                    	duration: 1500,
                        message: '请选择优惠券',
                        type: 'warning',
                        customClass: 'message-center'
                    });
					return ;
            	}
            	var couponUuids = that.checkList.join(",");
            	var memberUuids = that.selectCustomerUuid.join(",");
            	$.ajax({
                    url: "/vendor/cater/coupon/sendCoupons",
                    type: "POST",
                    data: {memberUuids:memberUuids,couponUuids:couponUuids},
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode == "1") {
                        	that.$message({
                            	showClose: true,
                            	duration: 1200,
                                message: '操作成功',
                                type: 'success',
                                customClass: 'message-center',
                                onClose: function () {
                                	that.dialogVisible = false;
                                }
                            });
                        } else {
                        	that.$message({
                        		showClose: true,
                            	duration: 1200,
                                message: '操作失败',
                                type: 'error',
                                customClass: 'message-center'
                            });
                        }
                    }
                });
            },
            handleDelete(position, uuids) {
                var self = this;
                self.$confirm('确定删除所选数据？','提示',{
                	confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(_ => {
           			$.ajax({
                        url: "/vendor/customer/customer/delete",
                        type: "POST",
                        data: JSON.stringify(uuids.split(",")),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data) {
                            if (data && data.returnCode == "1") {
                            	self.$message({
                                	showClose: true,
                                	duration: 1500,
                                    message: '删除成功',
                                    type: 'success',
                                    customClass: 'message-center',
                                    onClose: function () {
                                    	self.queryCustomer();
                                    }
                                });
                            } else {
                            	self.$message({
                            		showClose: true,
                                	duration: 1500,
                                    message: '删除失败',
                                    type: 'error',
                                    customClass: 'message-center'
                                });
                            }
                        }
                    });
	        	})
            }
        }
    });
	
	function queryCouponList(self){
        var queryMessage = {
        		"queryParams": {
                    "state": {
                        "operation": "EQ",
                        "value": true
                    },
                    "vendorUuid":{
    					"operation":"EQ",
    					"value":[[${vendorId}]]
    				}
                }
        };
		$.ajax({
            url: "/vendor/cater/coupon/listForSend",
            type: "POST",
            data: JSON.stringify(queryMessage),
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            success: function (data) {
                if (data && data.returnCode == "1") {
                	self.selectList = data.returnMessage;
                }
            }
        });
	}
</script>
</html>